<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page pageEncoding="UTF-8" %>
<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.6.3/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-daterangepicker/3.1/daterangepicker.min.css" rel="stylesheet">
    <title>随便打TCS系统</title>
</head>

<body class="nav-md">
<div class="container-fluid" style="padding-left: 235px">
    <div>
        <div id="toolbar" class="btn-group">
            <div class="row">
                <div class="col-14" style="margin-left: 15px">
                    <form class="form-inline" id="formSelect">
                        <div class="form-group mb-2">
                            <input type="text" class="form-control" id="orderNoSelect" placeholder="订单号">
                        </div>
                        <div class="form-group mb-2">
                            <input type="text" class="form-control" id="mobileSelect" placeholder="手机号">
                        </div>
                         <div class="form-group mb-2">
                            <input type="text" class="form-control" id="recipientsNameSelect" placeholder="收件人">
                        </div>
                        <div class="form-group mb-2">
                            <select class="form-control" id="statusSelect">
                                <option value="" selected:disabled style="diaplay:none">选择订单状态</option>
                                <option value="1">待支付</option>
                                <option value="6">待拼团</option>
                                <option value="2">待发货</option>
                                <option value="3">待收货</option>
                                <option value="4">待晒单</option>
                                <option value="5">已取消</option>
                            </select>
                        </div>
                        <div class="form-group mb-2">
                            <button type="button" id="search" class="btn btn-success">查询</button>
                            <button type="reset" id="reset" class="btn btn-danger">重置</button>
                        </div>
                        <div class="form-group mb-2">
                            <div class="col-14" style="margin-left: 20px">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exportSelectShow">
                                    导出
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <table id="table"></table>
    </div>

    <!-- 商品信息 -->
    <div class="modal fade" id="showDetailShares" tabindex="-1" role="dialog" aria-labelledby="showDetailSharesTitle">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="showDetailSharesTitle">商品信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="formShowDetailShares">
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="commodityNameDetail">商品名称：</label>
                                <input type="text" class="form-control" readonly id="commodityNameDetail">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="commodityRealPriceDetail">实付价：</label>
                                <input type="text" class="form-control" readonly id="commodityRealPriceDetail">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="commodityMarketPriceDetail">市场价：</label>
                                <input type="text" class="form-control" readonly id="commodityMarketPriceDetail">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="commoditySalesDetail">销量：</label>
                                <input type="text" class="form-control" readonly id="commoditySalesDetail">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="remarkDetail">备注：</label>
                                <textarea class="form-control" id="remarkDetail" rows="3"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 发货 -->
    <div class="modal fade" id="selfExpressShow" tabindex="-1" role="dialog" aria-labelledby="selfExpressH">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="selfExpressH">发货</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="formSelfExpress">
                        <div class="form-row">
                            <input type="text" hidden class="form-control" id="idSelfExpress"/>
                            <div class="form-group" style="width: 100%;">
                                <label for="recipientsNameSelfExpress">收件人姓名：</label>
                                <input type="text" class="form-control" id="recipientsNameSelfExpress" readonly>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="recipientsMobileSelfExpress">收件人手机号：</label>
                                <input type="text" class="form-control" id="recipientsMobileSelfExpress" readonly>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="recipientsMobileSelfExpress">收件人地址：</label>
                                <input type="text" class="form-control" id="recipientsAddressSelfExpress" readonly>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="expressOrderSelfExpress">快递单号：</label>
                                <input type="text" class="form-control" id="expressOrderSelfExpress">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="expressNumberSelfExpress">快递公司：</label>
                                <div style="display: contents">
                                    <select class="selectpicker form-control" id="expressNumberSelfExpress" data-max-options="1"
                                            data-live-search ="true" title="请选择与快递单号对应的快递公司">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="postSelfExpress" type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 导出 -->
    <div class="modal fade" id="exportSelectShow" tabindex="-1" role="dialog" aria-labelledby="exportSelectShowLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="exportSelectShowLabel">导出</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="formExportSelect">
                        <div class="form-row">
                            <div class="form-group" style="width: 100%;">
                                <label for="createTimeSelect">创建日期范围：</label>
                                <input type="text" class="form-control" id="createTimeSelect" placeholder="创建日期范围">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="exportSelect">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.15.3/locale/bootstrap-table-zh-CN.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.10/js/i18n/defaults-zh_CN.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-daterangepicker/3.1/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-daterangepicker/3.1/daterangepicker.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
</html>
<script>
    $(function () {
        $(document).ajaxComplete(function (event, xhr, settings) {
            let url = xhr.getResponseHeader("redirectUrl");

            let enable = xhr.getResponseHeader("enableRedirect");

            if((enable === "true") && (url !== "")){
                let win = window;
                while(win !== win.top){
                    win = win.top;
                }
                win.location.href = url;
            }
        })
        Date.prototype.Format = function (fmt) {
            let o = {
                "M+": this.getMonth() + 1,
                "d+": this.getDate(),
                "h+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "q+": Math.floor((this.getMonth() + 3) / 3),
                "S": this.getMilliseconds()
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (let k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };

        $("#createTimeSelect").daterangepicker({
            showDropdowns: true,
            autoUpdateInput: false,
            timePicker: true,
            timePicker24Hour: true,
            timePickerSeconds: true,
            autoApply: false,
            opens: 'center',
            showWeekNumbers: true,
            locale: {
                format: "YYYY-MM-DD HH:mm:ss",
                applyLabel: '确定',
                cancelLabel: '取消',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                firstDay: 1
            }
        }).on('apply.daterangepicker', function(ev, picker) {
            $('#createTimeSelect').val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + " - " + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
        }).on('cancel.daterangepicker', function(ev, picker) {
            $('#createTimeSelect').val('');
        });

        let operateEvents = {
            "click #detailShares": function (e, value, row, index) {
                $.ajax({
                    url : "/SbdVoip/admin/commodity/commodityWebDetail",
                    type : "POST",
                    data: {commodityId: row.commodityId},
                    dataType: "json",
                    contentType: "application/x-www-form-urlencoded",
                    success : function(result) {
                        if (result.code !== 2000) {
                            toastr.error(result.message);
                            return
                        }
                        let data = result.data;
                        $('#commodityNameDetail').val(data.commodityName);
                        $('#commodityRealPriceDetail').val(data.commodityRealPrice);
                        $('#commodityMarketPriceDetail').val(data.commodityMarketPrice);
                        $('#commoditySalesDetail').val(data.commoditySales);
                        $('#remarkDetail').val(data.remark);
                        $('#showDetailShares').modal('show');
                    }
                });
            },
            "click #selfExpress": function (e, value, row, index) {
                $('#recipientsNameSelfExpress').val(row.recipientsName);
                $('#recipientsMobileSelfExpress').val(row.recipientsMobile);
                $('#recipientsAddressSelfExpress').val(row.recipientsAddress);
                $('#idSelfExpress').val(row.id);
                let expressOrderSelfExpress = $('#expressOrderSelfExpress');
                let expressNumberSelfExpress = $('#expressNumberSelfExpress');
                if (row.expressStatus !== 0) {
                    expressOrderSelfExpress.val(row.expressOrder);
                    expressOrderSelfExpress.attr("readonly", true);

                    expressNumberSelfExpress.attr("disabled", true);
                    if (row.expressNumber !== undefined && row.expressNumber !== "") {
                        expressNumberSelfExpress.selectpicker('val', row.expressNumber);
                    }
                } else {
                    expressOrderSelfExpress.attr("readonly", false);
                    expressNumberSelfExpress.attr("disabled", false);
                }
                $('#selfExpressShow').modal('show');
            }
        };

        function statusFormatter(value, row, index) {
            if (value === 1) {
                return '<p class="text-success">待支付</p>';
            }
            if (value === 2) {
                return '<p class="text-info">待发货</p>';
            }
            if (value === 3) {
                return '<p class="text-danger">待收货</p>';
            }
            if (value === 4) {
                return '<p class="text-secondary">待晒单</p>';
            }
            if (value === 5) {
                return '<p class="text-secondary">已取消</p>';
            }
            if (value === 6) {
                return '<p class="text-success">待拼团</p>';
            }
        }

        function isReplacementFormatter(value, row, index) {
            if (value === 0) {
                return '<p class="text-info">未置换</p>';
            }
            if (value === 1) {
                return '<p class="text-success">已置换</p>';
            }
        }

        function commoditySubareaFormatter(value, row, index) {
            if (value === 0) {
                return '<p class="text-success">奖励金</p>';
            }
            if (value === 1) {
                return '<p class="text-success">积分</p>';
            }
        }

        function formatDate(value, row, index) {
            if(value === null){
                return "";
            }
            return new Date(parseInt(value)).Format("yyyy-MM-dd hh:mm:ss");
        }

        function actionFormatter(value, row, index) {
            debugger;
            if(row.status === 2){
                return [
                    '<button id="detailShares" type="button" class="btn btn-info">商品信息</button>',
                    '<button id="selfExpress" type="button" class="btn btn-danger">发货</button>'
                ].join('');
            }else {
                return [
                    '<button id="detailShares" type="button" class="btn btn-info">商品信息</button>',
                    '<button type="button" class="btn btn-info">发货中</button>'
                ].join('');
            }

        }
        let columns = [
            { checkbox: true, 'data-halign': 'center', width:50 },
            { field: 'orderNo', title: '订单编号', align: 'left',width:250 },
            { field: 'mobile', title: '手机号', align: 'left',width:250 },
            { field: 'recipientsName', title: '收件人', align: 'left',width:250 },
            { field: 'recipientsAddress', title: '收获地址', align: 'left',width:250 },
            { field: 'createTime', title: '创建时间', align: 'left',width:272,formatter: formatDate},
            { field: 'successTime', title: '成团时间', align: 'left',width:272,formatter: formatDate},
            { field: 'realPrice', title: '实付价', align: 'left',width:100 },
            { field: 'discountPrice', title: '折扣价', align: 'left',width:100 },
            { field: 'status', title: '状态', align: 'left',width:150,formatter: statusFormatter },
            { field: 'commoditySubarea', title: '商品分区', align: 'left',width:100,formatter: commoditySubareaFormatter },
            { field: 'isReplacement', title: '是否置换', align: 'left',width:100,formatter: isReplacementFormatter },
            { title: '操作', align: 'center', formatter: actionFormatter, events: operateEvents, width:500 }
        ];
        let bootstrapTable = {
            url: '/SbdVoip/admin/selfOrder/selfOrderWebList',
            pagination: true,
            toolbar: '#toolbar',
            smartDisplay: false,
            showRefresh : true,
            height: $(window).height(),
            method: 'post',
            pageList: "[10, 15, 20]",
            search: false,
            contentType: 'application/x-www-form-urlencoded',
            dataType: 'json',
            sidePagination: 'server',
            pageNumber : 1,
            pageSize: 10,
            onlyInfoPagination: false,
            striped: true,
            columns: columns,
            onPostHeader: function(){
                $('#tableId').bootstrapTable('resetView');
            },
            queryParams: function (params) {
                return {
                    offset: (params.offset / params.limit) + 1,
                    limit: params.limit
                };
            },
            responseHandler: function (res) {
                if (res.code !== 2000) {
                    toastr.error(res.message);
                    return {
                        total: 0,
                        rows: []
                    }
                }
                return {
                    total: res.data.total,
                    rows: res.data.rows
                }
            }
        };

        $('#table').bootstrapTable(bootstrapTable);

        $.ajax({
            url : "/SbdVoip/admin/selfExpress/getSelfExpressSelectData",
            type : "POST",
            data: {},
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            success : function(result) {
                if (result.code !== 2000) {
                    toastr.error(result.message);
                    return
                }
                let data = result.data;
                let expressNumberSelfExpress = $('#expressNumberSelfExpress');
                let html = "";
                for (let i = 0; i < data.length; i++) {
                    html += '<option data-tokens="' + data[i].expressNumber + '" ' +
                        'value="' + data[i].expressNumber + '">' + data[i].expressCompany + '</option>';
                }
                expressNumberSelfExpress.html(html);
                expressNumberSelfExpress.selectpicker('refresh');
                expressNumberSelfExpress.selectpicker('render');
            }
        });


        $('#search').click(function () {
            let orderNo = $('#orderNoSelect').val();
            let mobile = $('#mobileSelect').val();
            let status = $("#statusSelect").find("option:selected").val();
            let recipientsName = $('#recipientsNameSelect').val();
            bootstrapTable.queryParams = function (params) {
                return {
                    offset: (params.offset / params.limit) + 1,
                    limit: params.limit,
                    orderNo: orderNo,
                    mobile: mobile,
                    status: status,
                    recipientsName: recipientsName
                };
            };
            let table = $('#table');
            table.bootstrapTable('destroy');
            table.bootstrapTable(bootstrapTable);
        });

        $('#postSelfExpress').click(function () {
            let data = {
                expressOrder: $('#expressOrderSelfExpress').val(),
                expressNumber: $("#expressNumberSelfExpress").find("option:selected").val(),
                id: $('#idSelfExpress').val()
            };
            $.ajax({
                url : "/SbdVoip/admin/selfOrder/deliverOrder",
                type : "POST",
                data: data,
                dataType: "json",
                contentType: "application/x-www-form-urlencoded",
                success : function(result) {
                    if (result.code !== 2000) {
                        toastr.error(result.message);
                        return
                    }
                    $('#selfExpressShow').modal('hide');
                    let table = $('#table');
                    table.bootstrapTable('destroy');
                    table.bootstrapTable(bootstrapTable);
                    toastr.success(result.message);
                }
            });
        })

        $('#exportSelect').click(function () {
            const data = {
                createTime: $('#createTimeSelect').val()
            };

            let config = $.extend(true, {
                method: 'post'
            }, {
                url: '/SbdVoip/admin/selfOrder/selfOrderExport',
                data: data
            });
            let $iframe = $('<iframe id="down-file-iframe" />');
            let $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
            $form.attr('action', config.url);
            for(let key in config.data) {
                $form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
            }
            $iframe.append($form);
            $(document.body).append($iframe);
            $form[0].submit();
            $iframe.remove();
        })
    });
</script>
